<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap.css">
</head>

<body>
    <div style='padding: 10px 30px'>
        <!-- 评论面板 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">发表评论</h3>
            </div>
            <form class="panel-body" id="formAddCmt">
                <div>评论人：</div>
                <input type="text" class="form-control" name="username" autocomplete="off" id="name" />
                <div>评论内容：</div>
                <textarea class="form-control" name="content" id="content"></textarea>
                <button type="submit" class="btn btn-primary">发表评论</button>
            </form>
        </div>
        <!-- 评论列表 -->
        <ul class="list-group" id="cmt-list">
            <!-- <li class="list-group-item">
                    <span class="badge" style="background-color: #F0AD4E;">评论时间：</span>
                    <span class="badge" style="background-color: #5BC0DE;">评论人：</span>
                    Item 1
                  </li> -->
        </ul>
    </div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 加载数据
            function loadList() {
                $.get('http://www.liulongbin.top:3006/api/cmtlist', function(res) {
                    if (res.status === 200) {
                        // console.log(res);
                        var list = res.data;
                        var allList = [];
                        list.forEach(function(e) {
                            var ctag = `
                            <li class="list-group-item">
                            <span class="badge" style="background-color: #F0AD4E;">评论时间：${e.time}</span>
                            <span class="badge" style="background-color: #5BC0DE;">评论人：${e.username}</span>
                            ${e.content}
                             </li>
                            `;
                            // console.log(ctag);
                            allList.push(ctag);
                        })
                        $('#cmt-list').html(allList.join(''));
                        // $('#cmt-list').append(allList.join(''));
                        // $('#cmt-list').empty().append(allList.join(''));
                    }
                })
            }
            loadList();
            // 发表评论
            $('#formAddCmt').submit(function(e) {
                e.preventDefault();
                var formData = $(this).serialize();
                $.post('http://www.liulongbin.top:3006/api/addcmt', formData, function(res) {
                    if (res.status === 201) {
                        loadList();
                        $('#name').val('');
                        $('#content').val('');

                    }
                })
                console.log('submit')
            })
        })
    </script>
</body>

</html>